<template>
  <view class="rf-floor-index">
    <!--广告图-->
    <view class="swiper">
      <view class="swiper-box">
        <rf-swipe-dot
          :info="banner"
          mode="nav"
          :current="current"
          field="title"
        >
          <swiper @change="handleDotChange" autoplay="true">
            <swiper-item v-for="(item, index) in banner" :key="index">
              <navigator
                v-if="item.type === 'url'"
                :url="'/pages/web-view/web-view?url=' + item.value"
              >
                <view class="swiper-item">
                  <image :src="item.image" mode="aspectFill" />
                </view>
              </navigator>
              <view
                class="swiper-item"
                v-if="item.type === 'phone'"
                @tap="handlePhone(item.value)"
              >
                <image :src="item.image" mode="aspectFill" />
              </view>
              <view
                class="swiper-item"
                v-if="item.type === 'product'"
                @tap.stop="navTo(`/pages/product/product?id=${item.value}`)"
              >
                <image :src="item.image" mode="aspectFill" />
              </view>
              <view
                class="swiper-item"
                v-if="item.type === 'business'"
                @tap.stop="navTo(`/pages/user/coupon/detail?id=${item.value}`)"
              >
                <image :src="item.image" mode="aspectFill" />
              </view>
              <view class="swiper-item" v-else>
                <image :src="item.image" mode="aspectFill" />
              </view>
            </swiper-item>
          </swiper>
        </rf-swipe-dot>
      </view>
    </view>
    <!--列表-->
  </view>
</template>
<script>
/**
 *@des 首页楼层组件
 *@author stav stavyan@qq.com
 *@blog https://stavtop.club
 *@date 2020/01/08 11:28:39
 */
import $mAssetsPath from "@/config/assets.config";
import rfSwipeDot from "@/components/rf-swipe-dot";
export default {
  name: "rfFloorIndex",
  components: {
    rfSwipeDot,
  },
  props: {
    // 广告图
    banner: {
      type: Array,
      default() {
        return [];
      },
    },
    // 标题 例: 新品上市
    header: {
      type: Object,
      default() {
        return {};
      },
    },
    // 是否显示banner图
    bannerShow: {
      type: Boolean,
      default: true,
    },
    // 是否可点击
    isLink: {
      type: Boolean,
      default: true,
    },
    // icon
    icon: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      current: 0,
    };
  },
  computed: {
    bottom() {
      let bottom = 0;
      /*  #ifdef H5  */
      bottom = 90;
      /*  #endif */
      return bottom;
    },
  },
  methods: {
    // 监听轮播图切换
    handleDotChange(e) {
      this.current = e.detail.current;
    },
    //拨打电话
    handlePhone(phone) {
      uni.makePhoneCall({
        // 手机号
        phoneNumber: phone,
        // 成功回调
        success: (res) => {
          console.log("调用成功!");
        },
        // 失败回调
        fail: (res) => {
          console.log("调用失败!");
        },
      });
    }, // 通用跳转
    navTo(route) {
      this.$mRouter.push({ route });
    },
  },
};
</script>
<style scoped lang="scss">
.rf-floor-index {
  .banner {
    width: 92%;
    margin: 20upx 4% 0;
    image {
      width: 100%;
      height: 25vw;
      border-radius: 20upx;
      box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.05);
    }
  }
  /*轮播图*/
  .swiper {
    width: 100%;
    margin-bottom: 20upx;
    display: flex;
    justify-content: center;
    .swiper-box {
      width: 92%;
      height: 40vw;
      overflow: hidden;
      border-radius: 15upx;
      box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
      //兼容ios，微信小程序
      position: relative;
      z-index: 1;
      swiper {
        width: 100%;
        height: 40vw;
        swiper-item {
          image {
            width: 100%;
            height: 40vw;
          }
        }
      }
    }
  }
}
</style>
